<template>
    <div class="detail top-page">
        <!-- 返回上级的导航栏 -->
        <van-nav-bar title="房屋详情" left-text="旅途" left-arrow @click-left="onClickLeft" />


        <div class="main" v-if="detailData.mainPart">
            <!-- 轮播图 -->
            <detailSwipe :swipe-data="detailData.mainPart.topModule.housePicture.housePics" />
            <!-- 标题 -->
            <div class="info">
                <detailInfo :house-info="detailData.mainPart.topModule" />
            </div>
            <!-- 内容 -->
            <detailSection :header-text="'房屋设施'" :more-text="'全部房屋设施'">
                <!-- 插槽内容 -->
                <detailFacility :houseFacility="detailData.mainPart.dynamicModule.facilityModule.houseFacility" />
            </detailSection>

            <!-- 房东介绍 -->
            <detailSection :header-text="'房东介绍'" :more-text="'房东主页'">
                <detailLandlord :landlord-module="detailData.mainPart.dynamicModule.landlordModule" />
            </detailSection>

            <!-- 热门评论 -->
            <detailSection :header-text="'热门评论'" :more-text="'全部'+detailData.mainPart.dynamicModule.commentModule.totalCountStr+'条评论'">
                <detailHotComment :hot-comment="detailData.mainPart.dynamicModule.commentModule" />
            </detailSection>

            <!-- 预定须知 -->
            <detailSection :header-text="'预定须知'">
                <detailBook :book="detailData.mainPart.dynamicModule.rulesModule"/>
            </detailSection>
            
        </div>

    </div>
</template>

<script setup>
import useDetailStore from '@/store/modules/detail';
import detailSwipe from '../detail/cpns/detail-swipe.vue'
import detailInfo from './cpns/detail-info.vue';
import detailSection from '@/components/detail-section/detail-section.vue';
import detailFacility from './cpns/detail-facility.vue';
import detailLandlord from './cpns/detail-landlord.vue';
import detailHotComment from './cpns/detail-hotComment.vue';
import detailBook from './cpns/detail-book.vue';

import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia';

// const
const detailStore = useDetailStore()
const route = useRoute()

// 返回导航栏
const onClickLeft = () => history.back();

// 相关参数:在store前
const houseId = route.params.id

// store
detailStore.fetchDetailData(houseId)
const { detailData } = storeToRefs(detailStore)




</script>

<style lang="less" scoped>
.detail {

    .info {
        margin: 9px;
    }
}
</style>